<template>
  <el-container class="apply-task-container">
    <el-main class="model-tree" style="padding-bottom:10;padding-top:10">
      <!-- 发起流程 -->
      <el-card shadow="never" class="model-tree-left">
        <span style="font-size:14px;font-weight: 700;">流程分类</span>
        <el-tree
          ref="tree"
          class="treeitems"
          :data="categoryTreeList"
          :props="defaultProps"
          :default-expanded-keys="defaultList"
          :highlight-current="true"
          :check-on-click-node="true"
          :expand-on-click-node="true"
          node-key="id"
          style="margin-top: 10px;"
          :current-node-key="currentNodekey"
          @node-click="handleNodeClick"
        />
      </el-card>
      <div class="model-tree-right" style="position: relative;">
        <el-card shadow="never" class="tableCard">
          <el-row :gutter="40">
            <el-col v-for="(item, index) in entryList" :key="index" :xs="12" :md="8" :lg="6" class="list-item-box">
              <router-link :to="{name:`${item.path}`}" class="list-item clearfix">
                <div class="item-img r-2x fl">
                  <el-avatar class="avatar-info" shape="square" size="small" fit="cover" :icon="item.thumbIcon" />
                </div>
                <div class="item-intro fl">
                  <p class="intro-title text-elepsis ng-binding">{{ item.processDefinitionName }}</p>
                  <p class="intro-detail text-elepsis ng-binding">{{ item.description }}</p>
                </div>
              </router-link>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import '@/staticDict/flowStaticDict.js'
/* eslint-disable-next-line */
import { uploadMixin, statsDateRangeMixin, cachePageMixin } from '@/core/mixins'
/* eslint-disable-next-line */
import { FlowCategoryController, FlowEntryController } from '@/api/flowController.js'
import '@/components/Dialog'

export default {
  name: 'ApplyTask',

  mixins: [uploadMixin, statsDateRangeMixin, cachePageMixin],
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'name',
        value: 'id'
      },
      currentNodekey: '',
      currentNodeName: '',
      defaultList: [],
      categoryTreeList: [],
      entryList: [],
      totalCount: 0
    }
  },
  mounted() {
    // 初始化页面数据
    this.getCategoryTree()
  },
  methods: {
    getCategoryTree() {
      FlowCategoryController.treeList().then(res => {
        this.currentNodekey = res.data[0].id
        this.currentNodeName = res.data[0].name
        this.categoryTreeList = [...res.data]
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(this.currentNodekey)
          this.handleNodeClick({ id: this.currentNodekey, name: this.currentNodeName })
        })
      })
    },
    handleNodeClick(data) {
      if (!data.children) {
        this.currentNodekey = data.id
        this.currentNodeName = data.name
        this.loadTaskData(data.id)
      }
    },

    loadTaskData(cateId) {
      var params = {}
      params = {
        ...params,
        categoryId: '' + cateId
      }
      FlowEntryController.listByCategoryId(params).then(res => {
        if (res && res.data) {
          this.entryList = res.data.dataList
          this.totalCount = res.data.totalCount
        }
      })
    }
  }
}
</script>

<style  lang="scss">
  .apply-task-container {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    .model-tree {
      display: flex;
      .model-tree-left {
        margin-right: 20px;
        min-width: 200px;
        height: 620px;
        overflow-y: auto;
        .el-tree-node.is-current > .el-tree-node__content {
          background-color: #2F8DFB !important;
          color: white;
        }
      }
      .model-tree-right {
        width: calc(100% - 200px);
        .list-item-box {
          margin-bottom: 20px;
          padding-right: 10px;
          padding-left: 10px;
        }
        .list-item {
            position: relative;
            border: 1px solid #dddce2;
            border-radius: 4px;
            padding: 10px;
            display: inline-block;
            height: 70px;
            width: 100%;
            .item-img{
              display: inline-block;
              justify-content: center;
              align-items: center;
              border-radius: 4px;
              overflow: hidden;
              width: 40px;
              height: 40px;
              background: #409eff;;
              .avatar-info {
                width: 40px;
                height: 40px;
                line-height: 40px;
                background: #409eff;
              }
            }
            .item-intro{
              display: block;
              padding-left: 10px;
              letter-spacing: 0.5px;
              .intro-title {
                font-size: 14px;
                line-height: 24px;
                color: #595961;
                margin: -4px 0 0;
                font-weight: 700;
                letter-spacing: 1px;
              }
              .text-elepsis {
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .intro-detail {
                font-size: 12px;
                line-height: 20px;
                color: #9797A1;
                margin: 0;
              }
            }
            .fl{
              float: left;
            }
            .text-elepsis {
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
        }
        .list-item:hover {
            border: 1px solid #409eff;
            box-shadow: 2px 2px 1px #409eff;
        }
      }
    }
  }
</style>
